<template>

  <div class="box">
      <classheader></classheader>
    <div class="imgtitle">
      <img
        src="../../assets/images/Valentineimg/pc_valentine_banner.jpg"
        alt=""
      />
    </div>
    <div class="item">
      <div class="item1">
          <router-link to="/detail">
        <div class="img">
          <img
            src="../../assets/images/Valentineimg/pc_valentine_title_1.png"
            alt=""
          />
        </div>
        <div class="curr">
          <ul>
            <li v-for="(item, index) in arr" :key="index">
              <div class="label">{{ item.label }}</div>
              <div class="itemimg">
                <img
                  v-lazy="
                    require('../../assets/images/Valentineimg/' + item.img)
                  "
                  alt="" :key="index"
                />
              </div>
              <p class="title">{{ item.title }}</p>
              <p class="content">{{ item.content }}</p>
              <div class="gouwu">
                <div class="left">
                  心动价￥<a>{{ item.price }}</a>
                </div>
                <div class="right"><router-link to="/sendinfo">立即购买</router-link></div>
              </div>
            </li>
          </ul>
        </div>
          </router-link>
      </div>
      <div class="item2">
          <router-link to="/detail">
        <div class="img">
          <img
            src="../../assets/images/Valentineimg/pc_valentine_title_2.png"
            alt=""
          />
        </div>
        <div class="curr">
          <ul>
            <li v-for="(item, index) in arr2" :key="index">
              <div class="label">{{ item.label }}</div>
              <div class="itemimg">
                 <img
                  v-lazy="
                    require('../../assets/images/Valentineimg/' + item.img)
                  "
                  alt=""
                />
              </div>
              <p class="title">{{ item.title }}</p>
              <p class="content">{{ item.content }}</p>
              <div class="gouwu">
                <div class="left">
                  心动价￥<a>{{ item.price }}</a>
                </div>
                <div class="right"><router-link to="/sendinfo">立即购买</router-link></div>
              </div>
            </li>
          </ul>
        </div>
          </router-link>
      </div>
      <div class="item3">
          <router-link to="/detail">
        <div class="img">
          <img
            src="../../assets/images/Valentineimg/pc_valentine_title_3.png"
            alt=""
          />
        </div>
        <div class="curr">
          <ul>
            <li v-for="(item, index) in arr3" :key="index">
              <div class="label">{{ item.label }}</div>
              <div class="itemimg">
                 <img
                  v-lazy="
                    require('../../assets/images/Valentineimg/' + item.img)
                  "
                  alt=""
                />
              </div>
              <p class="title">{{ item.title }}</p>
              <p class="content">{{ item.content }}</p>
              <div class="gouwu">
                <div class="left">
                  心动价￥<a>{{ item.price }}</a>
                </div>
               <div class="right"><router-link to="/sendinfo">立即购买</router-link></div>
              </div>
            </li>
          </ul>
        </div>
          </router-link>
      </div>
      <div class="item4">
          <router-link to="/detail">
        <div class="img">
          <img
            src="../../assets/images/Valentineimg/pc_valentine_title_3.png"
            alt=""
          />
        </div>
        <div class="curr">
          <ul>
            <li v-for="(item, index) in arr4" :key="index">
              <div class="label">{{ item.label }}</div>
              <div class="itemimg">
                 <img
                  v-lazy="
                    require('../../assets/images/Valentineimg/' + item.img)
                  "
                  alt=""
                />
              </div>
              <p class="title">{{ item.title }}</p>
              <p class="content">{{ item.content }}</p>
              <div class="gouwu">
                <div class="left">
                  心动价￥<a>{{ item.price }}</a>
                </div>
                <div class="right"><router-link to="/sendinfo">立即购买</router-link></div>
              </div>
            </li>
          </ul>
        </div>
          </router-link>
      </div>
    </div>
    <classfooter></classfooter>
    <mysild></mysild>
  </div>
</template>

<script>
import classheader from '../../components/Header/header.vue'
import classfooter from '../../components/Footer/footer.vue'
import mysild from '../../components/Side/side.vue'

export default {
  data() {
    return {
      arr: [],
      arr2:[],
      arr3:[],
      arr4:[]
    };
  },
  components:{
    classheader,
    classfooter,
    mysild
  },
  mounted() {
    this.$axios.get("../../static/data/valentime.json").then((res) => {
      this.arr = res.data.item1;
      // console.log(res.data);
    });
    this.$axios.get("../../static/data/valentime.json").then((res) => {
      this.arr2 = res.data.item2;
        console.log(res.data.item2)
    });
     this.$axios.get("../../static/data/valentime.json").then((res) => {
      this.arr3 = res.data.item3;
        console.log(res.data.item3)
    });
     this.$axios.get("../../static/data/valentime.json").then((res) => {
      this.arr4 = res.data.item4;
        console.log(res.data.item4)
    });
  },
};
</script>

<style scoped lang="less">
.box {
  width: 100%;
  padding-bottom: 271px;
  background-repeat: repeat;
  background: url(../../assets/images/Valentineimg/21_valentine_section_bg.jpg)
    repeat;
    overflow: hidden;
}
.imgtitle {
  width: 100%;
  height: 373px;
  position: relative;
  z-index: 9999;
  img {
    width: 100%;
    height: 100%;
  }
}
.item {
  width: 100%;
  position: relative;
  .item1 {
    width: 1224px;
    margin: 0 auto;
    padding-bottom: 20px;
    position: relative;
    z-index: 999;
    .img {
      width: 100%;
      img {
        width: 100%;
        height: 160px;
      }
    }
    .curr {
      ul {
        li {
          float: left;
          list-style: none;
          width: 282px;
          height: 410px;
          position: relative;
          border-radius: 10px;
          overflow: hidden;
          background-color: rgb(255, 237, 237);
          margin: 0px 12px 24px 12px;
          padding: 5px;
          font-family: SourceHanSansCN, -apple-system, sans-serif,
            "microsoft yahei", Verdana, Arial, Helvetica, sans-serif;
          .label {
            font-weight: 300;
            position: absolute;
            top: 0px;
            left: 0px;
            padding: 5px 15px;
            background-color: rgb(233, 111, 111);
            font-size: 16px;
            color: white;
            border-radius: 10px 0 10px 0;
            overflow: hidden;
            z-index: 999;
          }
          .itemimg {
            width: 100%;
            height: 294px;
            box-sizing: border-box;
            overflow: hidden;
            img {
              width: 100%;
              height: 294px;
            }
          }
          p {
            width: 95%;
            margin: 0 auto;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: center;
          }
          .title {
            font-size: 20px;
            font-weight: 300;
            margin-top: 10px;
          }
          .content {
            font-size: 14px;
            font-weight: 200;
          }
          .gouwu {
            display: flex;
            width: 255px;
            margin: 0 auto;
            margin-top: 7px;
            height: 32px;
            background: url(../../assets/images/Valentineimg/pc_price_bg_s.png)
              center no-repeat;
            line-height: 32px;
            justify-content: space-around;
            .left {
              color: white;
              font-size: 14px;
              a {
                font-size: 18px;
                color: white;
                text-decoration: none;
              }
            }
            .right {
              a{
                 color: rgb(233, 111, 111);
              }
             
            }
          }
        }
        li:nth-of-type(1),
        li:nth-of-type(2) {
          width: 588px;
        }
        li:hover p {
          color: rgb(233, 111, 111);
        }
        .itemimg img:hover {
          transform: scale(1.04);
          transition: all linear 0.5s;
        }
      }
    }
  }
}
.item2 {
    width: 1224px;
    margin: 0 auto;
    padding-bottom: 20px;
    .img {
      width: 100%;
      img {
        width: 100%;
        height: 160px;
      }
    }
    .curr {
      ul {
        li {
          float: left;
          list-style: none;
          width: 282px;
          height: 410px;
          position: relative;
          border-radius: 10px;
          overflow: hidden;
          background-color: rgb(255, 237, 237);
          margin: 0px 12px 24px 12px;
          padding: 5px;
          font-family: SourceHanSansCN, -apple-system, sans-serif,
            "microsoft yahei", Verdana, Arial, Helvetica, sans-serif;
          .label {
            font-weight: 300;
            position: absolute;
            top: 0px;
            left: 0px;
            padding: 5px 15px;
            background-color: rgb(233, 111, 111);
            font-size: 16px;
            color: white;
            border-radius: 10px 0 10px 0;
            overflow: hidden;
            z-index: 999;
          }
          .itemimg {
            width: 100%;
            height: 294px;
            box-sizing: border-box;
            overflow: hidden;
            img {
              width: 100%;
              height: 294px;
            }
          }
          p {
            width: 95%;
            margin: 0 auto;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: center;
          }
          .title {
            font-size: 20px;
            font-weight: 300;
            margin-top: 10px;
          }
          .content {
            font-size: 14px;
            font-weight: 200;
          }
          .gouwu {
            display: flex;
            width: 255px;
            margin: 0 auto;
            margin-top: 7px;
            height: 32px;
            background: url(../../assets/images/Valentineimg/pc_price_bg_s.png)
              center no-repeat;
            line-height: 32px;
            justify-content: space-around;
            .left {
              color: white;
              font-size: 14px;
              a {
                font-size: 18px;
                color: white;
                text-decoration: none;
              }
            }
           .right {
              a{
                 color: rgb(233, 111, 111);
              }
             
            }
          }
        }
        li:hover p {
          color: rgb(233, 111, 111);
        }
        .itemimg img:hover {
          transform: scale(1.04);
          transition: all linear 0.5s;
        }
      }
    }
  }
  .item3 {
    width: 1224px;
    margin: 0 auto;
    padding-bottom: 20px;
    .img {
      width: 100%;
      img {
        width: 100%;
        height: 160px;
      }
    }
    .curr {
      ul {
        li {
          float: left;
          list-style: none;
          width: 282px;
          height: 410px;
          position: relative;
          border-radius: 10px;
          overflow: hidden;
          background-color: rgb(255, 237, 237);
          margin: 0px 12px 24px 12px;
          padding: 5px;
          font-family: SourceHanSansCN, -apple-system, sans-serif,
            "microsoft yahei", Verdana, Arial, Helvetica, sans-serif;
          .label {
            font-weight: 300;
            position: absolute;
            top: 0px;
            left: 0px;
            padding: 5px 15px;
            background-color: rgb(233, 111, 111);
            font-size: 16px;
            color: white;
            border-radius: 10px 0 10px 0;
            overflow: hidden;
            z-index: 999;
          }
          .itemimg {
            width: 100%;
            height: 294px;
            box-sizing: border-box;
            overflow: hidden;
            img {
              width: 100%;
              height: 294px;
            }
          }
          p {
            width: 95%;
            margin: 0 auto;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: center;
          }
          .title {
            font-size: 20px;
            font-weight: 300;
            margin-top: 10px;
          }
          .content {
            font-size: 14px;
            font-weight: 200;
          }
          .gouwu {
            display: flex;
            width: 255px;
            margin: 0 auto;
            margin-top: 7px;
            height: 32px;
            background: url(../../assets/images/Valentineimg/pc_price_bg_s.png)
              center no-repeat;
            line-height: 32px;
            justify-content: space-around;
            .left {
              color: white;
              font-size: 14px;
              a {
                font-size: 18px;
                color: white;
                text-decoration: none;
              }
            }
            .right {
              a{
                 color: rgb(233, 111, 111);
              }
             
            }
          }
        }
        li:hover p {
          color: rgb(233, 111, 111);
        }
        .itemimg img:hover {
          transform: scale(1.04);
          transition: all linear 0.5s;
        }
      }
    }
  }
  .item4 {
    width: 1224px;
    margin: 0 auto;
    padding-bottom: 20px;
    .img {
      width: 100%;
      img {
        width: 100%;
        height: 160px;
      }
    }
    .curr {
      ul {
        li {
          float: left;
          list-style: none;
          width: 282px;
          height: 410px;
          position: relative;
          border-radius: 10px;
          overflow: hidden;
          background-color: rgb(255, 237, 237);
          margin: 0px 12px 24px 12px;
          padding: 5px;
          font-family: SourceHanSansCN, -apple-system, sans-serif,
            "microsoft yahei", Verdana, Arial, Helvetica, sans-serif;
          .label {
            font-weight: 300;
            position: absolute;
            top: 0px;
            left: 0px;
            padding: 5px 15px;
            background-color: rgb(233, 111, 111);
            font-size: 16px;
            color: white;
            border-radius: 10px 0 10px 0;
            overflow: hidden;
            z-index: 999;
          }
          .itemimg {
            width: 100%;
            height: 294px;
            box-sizing: border-box;
            overflow: hidden;
            img {
              width: 100%;
              height: 294px;
            }
          }
          p {
            width: 95%;
            margin: 0 auto;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: center;
          }
          .title {
            font-size: 20px;
            font-weight: 300;
            margin-top: 10px;
          }
          .content {
            font-size: 14px;
            font-weight: 200;
          }
          .gouwu {
            display: flex;
            width: 255px;
            margin: 0 auto;
            margin-top: 7px;
            height: 32px;
            background: url(../../assets/images/Valentineimg/pc_price_bg_s.png)
              center no-repeat;
            line-height: 32px;
            justify-content: space-around;
            .left {
              color: white;
              font-size: 14px;
              a {
                font-size: 18px;
                color: white;
                text-decoration: none;
              }
            }
           .right {
              a{
                 color: rgb(233, 111, 111);
              }
             
            }
          }
        }
        li:hover p {
          color: rgb(233, 111, 111);
        }
        .itemimg img:hover {
          transform: scale(1.04);
          transition: all linear 0.5s;
        }
      }
    }
  }
</style>